@import '../../theme/index.scss';

.#{$hs-ui-prefix}-list {
    width: 100%;
    height: 100%;

    .#{$hs-ui-prefix}-list_header {
        width: 100%;
        font-size: $header-font-size;
        margin-bottom: $margin-16;

        * {
            font-size: $header-font-size;
        }
    }
    .#{$hs-ui-prefix}-list_wrapper {
        width: 100%;
        height: 100%;
    }
    .#{$hs-ui-prefix}-list_wrapper-horizontal {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        justify-items: center;

        .#{$hs-ui-prefix}-list_item {
            width: 9rem;
            height: 6rem;
            overflow: hidden;
            margin-bottom: var(--margin-100);
        }
    }
    .#{$hs-ui-prefix}-list_wrapper-vertical {
        
    }
    .#{$hs-ui-prefix}-list_item-bordered {
        border: 1px solid #ccc;
    }
    .#{$hs-ui-prefix}-list_footer {
        width: 100%;
    }
}